<template>
    <div class="header">
            <div class="left">
                <div class="back">
                    <router-link :to="{path:'/test',query:{city:city,id:id}}">
                    </router-link>
                </div>
            </div>
            <div class="right">
                <span><b><slot></slot></b></span>
            </div>
        </div>
</template>
<script>
export default {
    name:'HeaderTitle',
    props:['city','id']
}
</script>
<style lang="scss" scoped>
.header {
            width: 100%;
            height: 40px;
            background-color: #fff;
            display: flex;
            line-height: 40px;
            .left {
                flex-basis: 10%;
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                .back {
                    width: 10px;
                    height: 10px;
                    
                    margin-left: 20px;
                    a {
                        width: 100%;
                        height: 100%;
                        display: block;
                        border-left: 2px solid #000;
                    border-top: 2px solid #000;
                    transform: rotate(315deg);
                    }
                }
            } 
            .right {
                flex-basis: 90%;
                text-align: center;
                font-size: 18px;
            }
        }
</style>